<template>
  <all-header :title="title"/>
  <div class="set">
    <div class="setlist">
      <div class="item logout" @click="logOut">退出登录</div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {Toast} from 'vant'
import commonStore from '../../store/common'

const route = useRoute()
const title = computed(() => route.meta.title);

const common = commonStore()
const router = useRouter()
const logOut = () => { 
  common.logout().then(() => {
    Toast.success('退出成功')
    router.push({name: 'login'})
  }).catch(() => {
    Toast.fail('退出失败')
  });
}
</script>

<style lang = "scss" scope>
.set { 
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}

.setlist { 
  padding: .3846rem;
  padding-top: 1.1538rem;

  .item { 
    padding: .3846rem;
    background-color: #fff;
  }
}
</style>